<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>质点运动与反射</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="500" style="border: 1px solid #ccc">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>
    <script src="../script/wind/wind-all-0.7.3.js"></script>
    <script>
        const myCanvas = document.getElementById("myCanvas");
        const myCanvasCtx = myCanvas.getContext("2d");
        const ball = {
            position: {x: 100, y: 100},
            r: 15,
            vx: 190,
            vy: 110
        }
        const cyc = 10;
        const moveAsync = eval(Wind.compile("async", function () {
            while (true) {
                myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
                myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
                myCanvasCtx.fillStyle = "#fff";
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();

                if ((ball.r + ball.position.x > myCanvas.width ) || ball.position.x < ball.r ) {
                    ball.vx *= -1;
                }

                if ((ball.r + ball.position.y > myCanvas.height) || ball.position.y < ball.r) {
                    ball.vy *= -1;
                }
                ball.position.x += ball.vx * cyc / 1000;
                ball.position.y += ball.vy * cyc / 1000;
                $await(Wind.Async.sleep(cyc, null));
            }
        }));
        window.onload = function () {
            moveAsync().start();
        }


    </script>
</body>
</html>